<template>
	<!-- 推荐商品 -->
	<view class="hotGoods">
		<view class="tit" v-if="tit">推荐商品</view>
		<view class="good_list">
			<view class="good_item" v-for="(item,index) in goods" :Key="index" @tap="goGoodsDetail(item)">
				<image :src="item.img_url"></image>
				<view class="price">
					<text>￥{{item.sell_price}}</text>
					<text>￥{{item.market_price}}</text>
				</view>
				<view class="name">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {},
		props: {
			goods: {
				type: Array,
				default: []
			},
			tit: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			goGoodsDetail(item) {
				this.$emit("goGoodsDetail", item)
			},
		}
	}
</script>

<style lang="scss">
	// 推荐商品
	.hotGoods {
		background-color: #eee;
		overflow: hidden;

		.tit {
			height: 85rpx;
			@include flexCenterCenter;
			color: #b50e03;
			background-color: #FFFFFF;
			font-size: 42rpx;
			letter-spacing: 20rpx;
			margin: 7rpx 0;
		}
	}

	.good_list {
		@include flexWrapCenter;
		padding: 0 15rpx;

		.good_item {
			background-color: #FFFFFF;
			width: 355rpx;
			border-radius: 8rpx;
			padding: 15rpx;
			margin: 10rpx 0;

			>image {
				width: 80%;
				height: 260rpx;
				display: block;
				margin: auto;
			}

			.price {
				margin-top: 10rpx;
				color: #b50e03;
				font-size: 30rpx;

				>text {
					&:last-of-type {
						color: #ccc;
						font-size: 24rpx;
						margin-left: 15rpx;
						text-decoration: line-through;
					}
				}
			}

			.name {
				font-size: 28rpx;
				line-height: 50rpx;
				padding: 10rpx 0 15rpx 0;
			}
		}
	}
</style>
